<template>
  <div class="ApplicationForm">
    <div class="ApplicationForm-search">
      <span class="ApplicationForm-search-span-ls">|</span>
      <span class="ApplicationForm-search-span">组合项目</span>
    </div>
    <div class="ApplicationForm-table">
      <div class="button">
        <el-button size="default" :icon="CirclePlus" @click="onOpenAddRole('add')" type="primary"> 新增 </el-button>
        <el-form>
          <el-form-item label="组合项目检索:" prop="searchProject" style="font-weight: bolder">
            <SelectTable
              :table="tableSearch"
              :columns="tableSearch.columns"
              :max-height="400"
              :keywords="{ label: 'ZuHeXiangMuMingCheng', value: 'ZuHeXiangMuID' }"
              @radio-change="radioChange"
              :table-width="500"
              is-show-query
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="ApplicationForm-table-ls center-project">
        <pure-table
          ref="tableRef"
          :row-key="row => row.tid"
          highlight-current-row
          adaptive
          border
          align-whole="center"
          show-overflow-tooltip
          :data="tableData"
          :columns="columns"
          class="pure-table"
          @row-click="tableDataClick"
        >
          <template #caoZuo="scope">
            <el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
              <el-button type="primary" link :icon="EditPen" @click="onOpenEditRole('edit', scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="调整申请单" placement="top">
              <el-button type="primary" link :icon="Tickets" @click="onOpenEditResize('edit', scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
              <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </pure-table>
      </div>
    </div>
    <add-dialog-form ref="dialogRef" @refresh="getTableData()" />
    <resize-dialog-form ref="resizeDialogRef" @refresh="getTableData()" />
  </div>
</template>
<script setup lang="tsx">
import { CirclePlus, DCaret, Delete, EditPen, Tickets } from "@element-plus/icons-vue";
import { computed, defineAsyncComponent, nextTick, onMounted, reactive, ref, watch } from "vue";
import { useIntegratedProject } from "@/stores/modules/integratedProject";
import { DeleteZuHeXiangMuDel, PutZuHeXiangMuTiaoZhengShunXu } from "@/api/modules/integratedProject";
// import { ElMessage } from "element-plus";
import { useHandleData } from "@/hooks/useHandleData";
import SelectTable from "@/components/SelectTable/index.vue";
import mittBus from "@/utils/mittBus";
import Sortable from "sortablejs";
import { ElMessage } from "element-plus";
const AddDialogForm = defineAsyncComponent(
  () => import("@/views/DataMaintenance/IntegratedProject/components/Combination/addDialogForm.vue")
);
const ResizeDialogForm = defineAsyncComponent(
  () => import("@/views/DataMaintenance/IntegratedProject/components/Combination/resizeDialogForm.vue")
);
onMounted(() => {
  rowDrop();
});
const tableSearch = reactive({
  data: [],
  columns: [
    { label: "组合项目名称", width: "140px", prop: "ZuHeXiangMuMingCheng" },
    { label: "申请单名称", width: "149px", prop: "ShenQingDanMingCheng" },
    { label: "单价", width: "149px", prop: "DanJia" },
    { label: "成本价", width: "149px", prop: "ChengBenjia" },
    { label: "科室名称", width: "149px", prop: "KeShiMingCheng" }
  ]
});
const radioChange = async row => {
  // 给加上背景色
  // 申请单 和 组合项目
  useIntegratedProject().setShenQingDanID(row.ShenQingDanID);
  await useIntegratedProject().getZuHeXiangMuSel();
  tableData.value.map(async (item: any, index) => {
    if (item.ZuHeXiangMuID === row.ZuHeXiangMuID) {
      await setCurrent(index, tableData.value[index]);
    }
  });
  console.log(row.ShenQingDanID, "row.ShenQingDanID");
  mittBus.emit("shenQingDanBg", { ShenQingDanID: row.ShenQingDanID });
};
const tableRef = ref<any>();
const setCurrent = (index: any, row?: any) => {
  const { setCurrentRow, scrollTo } = tableRef.value.getTableRef();
  setCurrentRow(row);
  const targetRow: any = document.querySelector(
    `.center-project .el-table__body-wrapper tbody tr:nth-child(${index + 1})`
  ) as HTMLElement;
  const offsetHeight = targetRow?.offsetHeight;
  nextTick(() => {
    scrollTo({ top: index * offsetHeight });
  });
};

const columns = [
  {
    label: "排序",
    // type: "index",
    width: "70",
    cellRenderer: () => (
      <el-tag class="move">
        <el-icon>
          <DCaret />
        </el-icon>
      </el-tag>
    )
  },
  {
    label: "序号",
    type: "index",
    width: "70"
  },
  {
    label: "组合项目",
    width: "140",
    prop: "ZuHeXiangMuMingCheng"
  },
  {
    label: "单价",
    prop: "DanJia"
  },
  {
    label: "优惠价",
    prop: "YouHuiJia"
  },
  {
    label: "成本价",
    prop: "c"
  },
  {
    label: "科室成本价",
    prop: "ChengBenJia"
  },
  {
    label: "所属院区",
    prop: "SuoShuYuanQu"
  },
  {
    label: "适用性别",
    prop: "ShiYongXingBie"
  },
  {
    label: "提示信息",
    prop: "TiShiXinXi"
  },
  {
    label: "正常描述",
    prop: "ZhengChangMiaoShu"
  },
  {
    label: "拼音码",
    prop: "PYM"
  },
  {
    label: "医学名称",
    prop: "YiXueMingCheng"
  },
  {
    label: "医学简码",
    prop: "YiXueJianMa"
  },
  //
  {
    label: "外接编码",
    prop: "WaiJieBianMa"
  },
  {
    label: "HIS科室代码",
    prop: "HISKeShiDaiMa"
  },
  {
    label: "HIS科室名称",
    prop: "HISKeShiMingCheng"
  },
  {
    label: "默认检查者",
    prop: "MoRenJianChaZhe"
  },
  {
    label: "默认审核者",
    prop: "MoRenShenHeZhe"
  },
  {
    label: "报告所属分类",
    prop: "BaoGaoSuoShuFenLei"
  },
  {
    label: "费用类别",
    prop: "FeiYongLeiBie"
  },
  {
    label: "国标代码",
    prop: "GuoBiaoDaiMa"
  },
  {
    label: "上级国标代码",
    prop: "ShangJiGuoBiaoDaiMa"
  },
  {
    label: "上级国标名称",
    prop: "ShangJiGuoBiaoMingCheng"
  },
  {
    label: "备注1",
    prop: "BeiZhu1"
  },
  {
    label: "备注2",
    prop: "BeiZhu2"
  },
  {
    label: "备注3",
    prop: "BeiZhu3"
  },
  {
    label: "检查指标意义",
    prop: "JianChaZhiBiaoYiYi"
  },
  {
    label: "是否微信展示",
    prop: "ShiFouWeiXinZhanShi"
  },
  {
    label: "是否总检展示",
    prop: "ShiFouZongjianZhanShi"
  },
  {
    label: "是否启用",
    prop: "ShiFouQiYong"
  },
  {
    label: "组合项目ID",
    prop: "ZuHeXiangMuID"
  },
  {
    label: "是否在分检展示明细",
    prop: "ShiFouZaiFenJianXianShiMingXi"
  },
  {
    label: "是否导入外接",
    prop: "ShiFouDaoRuWanJie"
  },
  {
    label: "操作",
    fixed: "right",
    width: "140",
    slot: "caoZuo"
  }
];
const tableData = ref<any>([]);
const rowDrop = () => {
  nextTick(() => {
    const wrapper: HTMLElement | any = document.querySelector(".center-project .el-table__body-wrapper tbody");
    Sortable.create(wrapper, {
      animation: 300,
      // handle: ".drag-btn",
      handle: ".move",
      onEnd: ({ newIndex, oldIndex }) => {
        const [removedItem] = tableData.value.splice(oldIndex!, 1);
        tableData.value.splice(newIndex!, 0, removedItem);
        console.log(newIndex, oldIndex, removedItem);
        // console.log(tableData.value);
        PutZuHeXiangMuTiaoZhengShunXu(removedItem.ShunXu, newIndex, removedItem.ZuHeXiangMuID).then(() => {
          getTableData();
        });
      }
    });
  });
};
const deleteAccount = async (row: Partial<any> = {}) => {
  await useHandleData(DeleteZuHeXiangMuDel, row.ZuHeXiangMuID, `删除【${row.ZuHeXiangMuMingCheng}】`);
  await useIntegratedProject().getZuHeXiangMuSel();
  await useIntegratedProject().getJianSuoZuHeXiangMuSel();
  useIntegratedProject().clearZuHeXiangMuID();
};
// const searchProject = ref<any>();
const dialogRef = ref();
const resizeDialogRef = ref();
// 打开新增弹窗
const onOpenAddRole = (type: string) => {
  if (useIntegratedProject().shenQingDanID) {
    dialogRef.value.openDialog(type);
  } else {
    ElMessage.error("请先选择申请单");
  }
};
// 打开修改弹窗
const onOpenEditRole = (type: string, row: Object) => {
  dialogRef.value.openDialog(type, row);
};
// 打开调整申请单
const onOpenEditResize = (type: string, row: Object) => {
  resizeDialogRef.value.openDialog(type, row);
};
// 初始化表格
const getTableData = () => {
  useIntegratedProject().getZuHeXiangMuSel();
};
// 每一行的点击事件
const tableDataClick = data => {
  // console.log(data.ZuHeXiangMuID);
  // 默认是根据表格的第一项请求数据
  useIntegratedProject().setZuHeXiangMuIDID(data.ZuHeXiangMuID);
  useIntegratedProject().getBaoHanMingXiSel();
  useIntegratedProject().getBaoHanZuHeXiangMuSel();
  useIntegratedProject().setTagRightData(true);
};
const newShenQingDanOption = computed(() => {
  return useIntegratedProject().zuHeXiangMuOption;
});
watch(newShenQingDanOption, () => {
  tableData.value = [...newShenQingDanOption.value] as any;
});
watch(
  () => useIntegratedProject().zuHeProjectSearch,
  value => {
    tableSearch.data = [...value] as any;
  },
  {
    deep: true,
    immediate: true
  }
);
// const newtableSearchData = computed(() => {
//   return useIntegratedProject().zuHeProjectSearch;
// });
// watch(newtableSearchData, () => {
//   tableSearch.data = [...newtableSearchData.value] as any;
// });
</script>
<style scoped lang="scss">
.ApplicationForm {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .ApplicationForm-search {
    height: 25px;
    padding: 10px 20px;
    background: white;
    .ApplicationForm-search-span-ls {
      font-size: larger;
      font-weight: 900;
      line-height: 0;
      color: #239487;
    }
    .ApplicationForm-search-span {
      margin-left: 5px;
      color: #239487;
    }
  }
  .ApplicationForm-table {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px 20px;
    margin-top: 8px;
    background: white;
    .button {
      display: flex;
      justify-content: space-between;
    }
    .ApplicationForm-table-ls {
      flex: 1;
      margin-top: 10px;
    }
  }
}
</style>
